fetch('http://localhost:3000/playlist/detail'+location.search,{
    method:"get",
    mode:"cors"
})
.then(r=>r.json())
.then(data=>{
    console.log(data);
    let string =''
    /*头部*/
    string+=
        `    
         <div class="top_img">
      <img src="${data.playlist.coverImgUrl}" alt="">
    </div>
    <div class="avat_box">
      <img class="head_img" src="${data.playlist.coverImgUrl}" alt="">
      <div class="avat_info">
        <h3>${data.playlist.name}</h3>
        <img class="avat_img" src="${data.playlist.creator.avatarUrl}" alt="">
        <p>${data.playlist.creator.nickname}</p>
      </div>
    </div>
        `
    /*歌单*/
    let string1=''
    data.playlist.tracks.forEach(function (value,index){
        string1+=

                `
                 <a href="../html/songplay.html?id=${value.id}">
                   <li>
                <div class="sgfl">${index+1}</div>
                <h3>${value.name}<span>${value.alia}<span></h3>
                <p>${value.ar[0].name}-${value.al.name}</p>
                <div class="paly_btn"></div>
                 </li>
                 </a>
                `
    })
    $(".head_buttom").innerHTML=string;
    $('.pyallsong_one>ul').innerHTML=string1;
    $(".song_tag").innerHTML=data.playlist.tags;
})
let flag=1;
$(".avat_intro_arrow").onclick=function () {
    if(flag%2==1)
    {
        this.innerHTML="bk";
        $(".avat_intro_content").style.display='block'
    }else {

        this.innerHTML="go";
        $(".avat_intro_content").style=this.style;
    }
    flag+=1;
}
function  $(e) {
    return document.querySelector(e)
}
fetch("http://localhost:3000/comment/playlist"+location.search,{
    method:"get",
    mode:"cors"
})
    .then(r=>r.json())
    .then(data=>{
        console.log(data);
        let  string=""
      data.hotComments.forEach(function(value,index) {
          string+=
              `
            <div class="cmt_one">
                    <div class="cmt_head">
                        <img src="${value.user.avatarUrl}" alt="">
                    </div>
                    <div class="cmt_right">
                        <div class="cmt_header">
                            <div class="cmt_meta">
                                <span class="cmt_user"><a class="nickname" href="">${value.user.nickname}</a></span>
                                <div class="cmt_time">${timechange(value.time)}</div>
                            </div>
                            <div class="cmt_like">
                                <div class="cmt_likearea">
                                    <span class="cmt_count">${value.likedCount}</span>
                                    <i class="cmt_likeicn"></i>
                                </div>
                            </div>
                        </div>
                        <div class="cmt_content">
                            <span class="cmt_text">${value.content}</span>
                        </div>
                    </div>
                </div>
            `
      })
        $(".cmt_list").innerHTML=string;
        console.log(data.hotComments);
        if (data.hotComments==""){
            $(".comment_title").style.display="none"
        }
        let str=""
        data.comments.forEach(function (value,index) {
            str+=
               `
               <div class="cmt_one">
                    <div class="cmt_head">
                        <img src="${value.user.avatarUrl}" alt="">
                    </div>
                    <div class="cmt_right">
                        <div class="cmt_header">
                            <div class="cmt_meta">
                                <span class="cmt_user"><a class="nickname" href="">${value.user.nickname}</a></span>
                                <div class="cmt_time">${timechange(value.time)}</div>
                            </div>
                            <div class="cmt_like">
                                <div class="cmt_likearea">
                                    <span class="cmt_count">${value.likedCount}</span>
                                    <i class="cmt_likeicn"></i>
                                </div>
                            </div>
                        </div>
                        <div class="cmt_content">
                            <span class="cmt_text">${value.content}</span>
                        </div>
                    </div>
                </div>
               `
        })
$(".cmt_newlist").innerHTML=str
    })
function timechange(timestamp) {
    let newdate= new Date();
    newdate.setTime(timestamp);
    return newdate.toLocaleDateString();
}